<template>
  <div class="home">
    <div class="mapToolMain">
      <div class="titleMain">点位上图</div>
      <el-row :gutter="10">
        <el-col :span="8" v-for="(item, index) in tooList" @click="mapChange(item.title)">
          <div class="mapToolListMain" :title="item.title">{{ item.title }}</div>
        </el-col>
      </el-row>
      <div class="titleMain">轨迹上图</div>
      <el-row :gutter="10">
        <el-col :span="8" v-for="(item, index) in tooList1" @click="mapChange(item.title)">
          <div class="mapToolListMain" :title="item.title">{{ item.title }}</div>
        </el-col>
      </el-row>
      <div class="titleMain">图形绘制</div>
      <el-row :gutter="10">
        <el-col :span="8" v-for="(item, index) in tooList3" @click="mapChange(item.title)">
          <div class="mapToolListMain" :title="item.title">{{ item.title }}</div>
        </el-col>
      </el-row>
      <div class="titleMain">地图事件</div>
      <el-row :gutter="10">
        <el-col :span="8" v-for="(item, index) in tooList2" @click="mapChange(item.title)">
          <div class="mapToolListMain" :title="item.title">{{ item.title }}</div>
        </el-col>
      </el-row>
    </div>
    <leafletmap :mapId="mapId" ref="mapId" @returnData="returnData"></leafletmap>
  </div>
</template>

<script>
import leafletmap from '../components/leafletMap/Index';
import markerIcon from '../components/leafletMap/img/marker-icon.png'
export default {
  name: 'Home',
  components: {
    leafletmap
  },
  data () {
    return {
      mapId: 'mapId',
      tooList: [
        {title: '标记点'},
        {title: '自定义HTML'},
        {title: '显示圆形'},
        {title: '显示多边形'},
      ],
      tooList1: [
        {title: '普通轨迹'},
        {title: '动画轨迹'},
        {title: '带点位的动画轨迹'},
      ],
      tooList2: [
        {title: '获取坐标点'},
        {title: '设置中心点'},
        {title: '删除绘制的图层'},
        {title: '删除测距的图层'},
        {title: '删除上图的图层'},
      ],
      tooList3: [
        {title: '画圆'},
        {title: '画线'},
        {title: '画矩形'},
        {title: '画多边形'},
        {title: '测距'},
        {title: '测圆面积'},
        {title: '测矩形面积'},
      ],
    }
  },
  methods: {
    mapChange (val) {
      switch (val) {
        case '获取坐标点':
          this.mapLatLngClick();
          break
        case '设置中心点':
          this.mapCenterClick();
          break
        case '删除绘制的图层':
          this.removeDrawLayer();
          break
        case '删除图层':
          this.deletePolyLineListClick();
          break
        case '删除测距的图层':
          this.removeMeasureClick();
          break
        case '标记点':
          this.mapMarker();
          break
        case '自定义HTML':
          this.mapMarkerHtml();
          break
        case '显示圆形':
          this.circleClick();
          break
        case '显示多边形':
          this.polygonClick();
          break
        case '普通轨迹':
          this.mapPolylineClick();
          break
        case '动画轨迹':
          this.mapPolyLineAnimationClick();
          break
        case '带点位的动画轨迹':
          this.mapPolyLineMarkerAnimationClick();
          break
        case '画圆':
          this.drawCircleClick();
          break
        case '画线':
          this.drawPolyLineClick();
          break
        case '画矩形':
          this.drawRectangleClick();
          break
        case '画多边形':
          this.drawPolygonClick();
          break
        case '测距':
          this.measurePolyLineClick();
          break
        case '测圆面积':
          this.measureCircleClick();
          break
        case '测矩形面积':
          this.measureRectangleClick();
          break
      }
    },

    // 获取坐标点
    mapLatLngClick () {
      this.$refs.mapId.mapLatLngClick();
      alert("点击地图，请在控制台查看经纬度信息！")
    },

    // 设置地图中心点
    mapCenterClick () {
      let obj = [26.892679095908164,108.83056640625001];
      this.$refs.mapId.mapCenterClick(obj);
    },

    // 单点
    mapMarker () {
      let obj = {
        name: '1',
        lat: '23.251440517056004',
        lng: '113.49975585937501',
        icon: {
          iconUrl: markerIcon,
          iconSize: [32, 32],
        },
        text: {
          show: true,
          content: '这是窗口内容',
        },
        click: (obj) => {
          this.markerChange(obj);
        },
      };
      this.$refs.mapId.mapMarker(obj);
    },

    // 自定义HTML点位
    mapMarkerHtml () {
      let col = 'rgba(49,51,53, .9)';
      let htmlStr = '<div class="trsWaterRipple" style="background: '+ col +';"></div>';
      let obj = {
        name: '2',
        lat: '24.016361823963038',
        lng: '113.23608398437501',
        divIcon: {
          html: htmlStr,
          iconSize: [40, 40],
          className: 'trsWaterRipple',
          popupAnchor: [-15, -5],
        },
        text: {
          show: true,
          content: '这是窗口内容',
        },
        click: (obj) => {
          this.markerChange(obj);
        },
      };
      this.$refs.mapId.mapMarker(obj);
    },

    // 标记点点击事件
    markerChange (obj) {
      console.log(obj)
      alert("点击了"+ obj.name + "标记点,打开控制台查看更多信息")
    },

    // 普通轨迹
    mapPolylineClick () {
      let obj = {
        name: '1',
        latList: [
          [24.761796517185815, 112.38464355468751],
          [23.885837699862005, 112.55493164062501],
          [23.55895191986295, 111.6156005859375],
        ],
        color: '#1890FF',
      };
      this.$refs.mapId.mapPolyline(obj);
    },

    // 动画轨迹
    mapPolyLineAnimationClick () {
      let latobj = {
        name: '2',
        latList: [
          [23.629427267052428, 113.90075683593751],
          [23.458207269894125, 113.10424804687501],
          [22.730590425493833, 113.01086425781251],
          [22.156883186860703, 111.90124511718751],
        ],
        color: '#EB793C',
      };
      this.$refs.mapId.mapPolyLineAnimation(latobj);
    },

    // 带标记点的动画轨迹
    mapPolyLineMarkerAnimationClick () {
      let latobj = {
        latList: [
            [22.831883254915766, 114.49951171875],
            [22.608939952085887, 114.0765380859375],
            [22.558220454844044, 113.18664550781251],
            [21.9328547363353, 112.69775390625],
            [22.598797546832557, 111.88476562500001],
            [23.860721778614522, 112.14843750000001],
        ],
        color: '#39C9BC',
      };
      this.$refs.mapId.mapPolyLineMarkerAnimation(latobj);
    },

    // 画圆
    drawCircleClick () {
      this.$refs.mapId.drawCircle();
    },

    // 画线
    drawPolyLineClick () {
      this.$refs.mapId.drawPolyLine();
    },

    // 画矩形
    drawRectangleClick () {
      this.$refs.mapId.drawRectangle();
    },

    // 画多边形
    drawPolygonClick () {
      this.$refs.mapId.drawPolygon();
    },

    // 显示圆形
    circleClick () {
      let obj = {
        name: '圆形名称',
        lat: '24.602074737077242',
        lng: '111.06628417968751',
        radius: '50431.90981919304',
        text: {
          show: true,
          content: '这是一个圆',
        },
      };
      this.$refs.mapId.circle(obj);
    },

    // 显示多边形
    polygonClick () {
      let obj = {
        name: '多边形名称',
        latlng: [
          [24.422143781858985, 112.14843750000001],
          [23.971195346707432, 111.61010742187501],
          [23.910948746482543, 112.91198730468751],
        ],
        text: {
          show: true,
          content: '这是一个多边形',
        },
      };
      this.$refs.mapId.polygon(obj);
    },

    // 删除绘制的图层
    removeDrawLayer () {
      this.$refs.mapId.removeDrawPolyLine();
      this.$refs.mapId.removeDrawRectangle();
      this.$refs.mapId.removeDrawCircle();
      this.$refs.mapId.removeDrawPolygon();
    },

    // 删除图层
    deletePolyLineListClick () {
      this.$refs.mapId.deletePolyLineList();
      this.$refs.mapId.deleteMarkerList();
    },

    // 删除测距图层
    removeMeasureClick () {
    },

    // 测距
    measurePolyLineClick () {
      this.$refs.mapId.measurePolyLine();
    },

    // 测圆面积
    measureCircleClick () {
      this.$refs.mapId.measureCircle();
    },

    // 测矩形面积
    measureRectangleClick () {
      this.$refs.mapId.measureRectangle();
    },

    // 地图数据回传
    returnData (obj) {
      alert("打开控制台查看对象信息")
      console.log(obj)
    },
  },
}
</script>
